<template>
  <div class="report-b">
    <van-nav-bar :title="$route.meta.title" left-arrow @click-left="onClickLeft" style="width:100%;" :border="false" />
    <div class="report-b-all">
      <van-cell-group class="report-b-alltime" @click="calendars = true" :border="false">
        <van-cell :title="datetimes" icon-prefix="report-calendars" :icon="require('@/assets/finance/calendar.png')" is-link />
      </van-cell-group>
    </div>
    <van-collapse v-model="activeNames" class="report-b-record" :border="false" v-for="(n, idx) in reportList" :key="idx">
      <van-collapse-item :title="n.orderat" :name="n.orderat" :border="false">
        <div class="report-b-record-tit">
          <span>收款笔数</span><span>合计</span>
        </div>
        <div class="report-b-record-num">
          <span>{{ n.allnum }}</span><span>￥{{ n.amount }}</span>
        </div>
        <div class="report-b-record-user" v-for="m in n.dayrecord" :key="m.id">
          <div class="report-b-record-user-img">
            <van-image :src="m.avatar || require('@/assets/finance/avatar.png')" fit="cover" />
          </div>
          <div class="report-b-record-user-info">
            <div class="report-b-record-user-info-col1">
              <span class="uname">{{ m.nick_name }}</span>
              <span class="ushop">{{ m.user_name }}</span>
              <span class="ushop">当日共 {{ m.num }} 次消费</span>
            </div>
            <div class="report-b-record-user-info-col2">
              <span class="uprice">￥{{ m.amount }}</span>
              <!-- <span class="ushop">已享优惠</span> -->
            </div>
          </div>
        </div>
      </van-collapse-item>
    </van-collapse>
    <!-- 日历选择器 -->
    <van-calendar v-model="calendars" type="range" color="#1bb89c" :allow-same-day="true" :min-date="minDate" :max-date="maxDate" @confirm="onConfirm2" />
    <van-empty description="暂无收款记录" v-if="reportList.length == 0" />
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: "ReportB",
  data () {
    return {
      shopid: "",
      userid: JSON.parse(localStorage.getItem("userInfo")).id,
      calendars: false,
      minDate: new Date(2021, 0, 1),
      maxDate: new Date(2050, 0, 31),
      datetimes: "自定义日期",
      activeNames: ['0'],
      reportList: [],
    };
  },
  methods: {
    onClickLeft () {
      this.$router.push({ name: 'controls' })
    },
    // 根据起始时间获取数据
    info (begintime, endtime) {
      this.$axios('/finance/shopsrecord', {
        begintime: begintime, //开始日期
        endtime: endtime //结束日期
      })
        .then(res => {
          if (res.data.code == 1) {
            this.reportList = res.data.data
          } else {
            Toast.fail('网络异常,请重试!')
          }
        });
    },
    formatDate (date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirm2 (date) {
      this.calendars = false;
      const [start, end] = date;
      this.datetimes = `${this.formatDate(start)} - ${this.formatDate(end)}`;
      this.info(this.formatDate(start), this.formatDate(end))
    },
  },
  created () {
    this.info('', '');
  },
};
</script>

<style lang="less" scoped>
.report-b {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f6f6f6;
  &-all {
    display: flex;
    flex-direction: column;
    &-alltime {
      display: flex;
      flex-direction: column;
      /deep/ .van-cell__title {
        /deep/ .van-icon {
          vertical-align: middle;
        }
      }
    }
    .van-icon__image {
      align-self: center;
      width: 0.6rem;
      height: 0.6rem;
    }
  }
  &-record {
    /deep/ .van-cell {
      color: #231811;
      background-color: #f6f6f6;
    }
    /deep/ .van-collapse-item__content {
      border-radius: 0 0 50px 50px;
    }
    &-tit,
    &-num {
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
    }
    &-tit {
      font-size: 30x;
      color: rgba(35, 24, 17, 0.6);
    }
    &-num {
      font-size: 30px;
      color: black;
      font-weight: bold;
    }
    &-user {
      display: flex;
      justify-content: space-between;
      padding: 20px 10px;
      &-img {
        display: flex;
        margin-right: 20px;
        align-items: center;
        /deep/ .van-image__img {
          width: 1.3rem;
          height: 1.3rem;
          border-radius: 50%;
        }
      }
      &-info {
        display: flex;
        justify-content: space-between;
        width: 100%;
        &-col1 {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        }
        &-col2 {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        }
        .uname {
          font-size: 28px;
          color: black;
        }
        .ushop {
          font-size: 22px;
          color: rgba(35, 24, 17, 0.4);
        }
        .uprice {
          color: black;
          font-size: 30px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>